﻿@{
    Layout = "~/Views/Shared/_FormGray.cshtml";
    var path = HostingEnvironment.ContentRootPath;
}

@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(path, Url.Content("/ajax/libs/bootstrap-fileinput/css/fileinput.min.css"))
    @BundlerHelper.Render(path, Url.Content("/ajax/libs/bootstrap-fileinput/fileinput.js"))
    @BundlerHelper.Render(path, Url.Content("/ajax/libs/bootstrap-fileinput/locales/zh.js"))
}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>文件上传控件 <small>https://github.com/kartik-v/bootstrap-fileinput</small></h5>
                </div>
                <div class="ibox-content">
                    <div class="form-group">
                        <label class="font-noraml">简单示例</label>
                        <div class="file-loading">
                            @*<input class="file" id="file" type="file" multiple data-min-file-count="1">*@
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-noraml">多文件上传</label>
                        <div class="file-loading" id="div_insect_file">
                            <input id="fileinput" type="file" multiple>
                        </div>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label class="font-noraml">相关参数详细信息</label>
                        <div>
                            <a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-fileinput" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-fileinput</a>
                            <a href="https://plugins.krajee.com/file-input">
                                官方文档地址
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        var options = {
            language: 'zh',
            theme: 'explorer-fas',//主题
            uploadUrl: '/File/UploadFile?fileModule=2',//上传路径
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            removeFromPreviewOnError: true, //当选择的文件不符合规则时，例如不是指定后缀文件、大小超出配置等，选择的文件不会出现在预览框中，只会显示错误信息
            maxFileCount: 10, //表示允许同时上传的最大文件个数
            overwriteInitial: false,
            initialPreviewAsData: true,
            showUpload: true, //是否显示上传按钮  
            showRemove: true, // 是否显示移除按钮  
            showCaption: true,//是否显示标题  
            showPreview: true,// 是否预展示图片
            initialPreview: [
                // "/image/portrait.png"
            ]
        };
        //多文件上传
        $("#fileinput").fileinput(options);

        // 实现图片被选中后自动提交
        $('#fileinput').on('filebatchselected', function (event, files) {
            // 选中事件
            //$(event.target).fileinput('upload')
        })
            // 异步上传错误结果处理
            .on('fileerror', function (event, data, msg) {
                // 清除当前的预览图 ，并隐藏 【移除】 按钮
                $(event.target).fileinput('clear').fileinput('unlock')
                $(event.target).parent().siblings('.fileinput-remove').hide()
                // 打开失败的信息弹窗
                $.modal.alertWarning('请求失败，请稍后重试')
            })
            // 异步上传成功结果处理
            .on('fileuploaded', function (event, data, previewId, index) {
                // 判断 code 是否为1000 代表成功
                const getData = data.response
                if (getData.code === 1000) {
                    let eleID = $(event.target).prop('id')
                    //在上传成功事件中将服务器返回的所需数据，添加到该文件对应的div中
                    var resData = data.response.data;
                    //获取图片编号 把上传成功后的图片编号存储在上传文件input上方便上传获取
                    var dataId = $('#' + eleID).attr('data-id');
                    if (dataId != null && dataId != undefined) {
                        dataId = dataId + "," + resData.id
                    } else {
                        dataId = resData.id;
                    }
                    $('#' + eleID).attr('data-id', dataId);
                    //当前图片编号存储在预览图div方便删除时使用
                    $('#' + previewId).attr('data-id', resData.id);
                } else {
                    // 失败回调
                    // 清除当前的预览图 ，并隐藏 【移除】 按钮
                    $(event.target)
                        .fileinput('clear')
                        .fileinput('unlock')
                    $(event.target)
                        .parent()
                        .siblings('.fileinput-remove')
                        .hide()
                    // 打开失败的信息弹窗
                    $.modal.alertWarning('请求失败，请稍后重试')
                }
            })
            //预览图删除  预览图删除后无法在上传同一张图，为解决
            .on('filepreremove', function (event, key) {
                //$("#fileinput").empty();
                $("#div_insect_file").empty();
                var element = '<input id="fileinput" type="file" multiple>';
                $("#div_insect_file").append(element);
                $("#fileinput").fileinput(options);
                // $('.fileinput-remove').click()
                //清除文件输入 此方法清除所有未上传文件的预览，清除ajax文件堆栈，还清除本机文件输入
                //$('#fileinput').fileinput('clear');
                //$('#fileinput').fileinput('clear').fileinput('disable');
            })
            //上传成功删除
            .on('filesuccessremove', function (event, key) {
                ys.ajax({
                    url: '/File/DeleteFile?ids=' + $("#" + key).attr("data-id"),
                    type: "post",
                    success: function (obj) {
                        if (obj.code == 1000) {
                            ys.msgSuccess('操作成功');
                        }
                        else {
                            ys.msgError(obj.Message);
                        }
                    }
                });
            })
            .on("fileclear", function (event, data, msg) {
                debugger
            });
    })
</script>